<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
	+ request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/> <!-- 设置页面的基本路径，页面所有资源引入和页面跳转都济源bathPath -->

<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
</head>
<body>
<article class="page-container">
	<!-- form的action中根据判断共享对象user是否为空，来指定表单提交的url -->
	<form class="form form-horizontal" action="${empty user ? 'admin/insert.do' : 'admin/update.do'}" method="post" id="adminForm">
		<!-- 在更新用户信息的环境下把userId隐藏提交给后台 -->
		<input type="hidden" value="${user.userId }" name="userId" />
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>用户名：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<!-- 在更新用户信息的环境下锁定用户名信息，不能更改 -->
				<input type="text" class="input-text" ${user != null ? 'disabled' : '' } value="${user.username }" placeholder="请输入用户名" id="username" name="username">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>真实姓名：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="${user.realname }" placeholder="请输入真实姓名" id="realname" name="realname">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>初始密码：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="password" class="input-text" placeholder="密码" id="password" name="password">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>确认密码：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="password" class="input-text" placeholder="请确认密码" id="passwordAgain" name="passwordAgain">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>角色名称：</label>
			<div class="formControls col-xs-8 col-sm-9"> 
				<span class="select-box">
					<select name="roleId" class="select">
						<option value="">请选择</option>
						<c:forEach var="role" items="${roles }">
							<!-- 当处于编辑环境时，当前需要编辑的用户的roleId被默认选中 -->
							<option ${role.roleId eq user.roleId ? 'selected' : '' } value="${role.roleId }">${role.rolename }</option>
						</c:forEach>
					</select>
				</span> 
			</div>
		</div>
			
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
/* 使用jquery-validation技术进行表单提交前的校验 */
$().ready(function(){
	/* 在键盘按下并释放及表单提交时验证 */
	$("#adminForm").validate({
		// 校验规则
		rules:{
			username:{
				required:true,
				isEnglish:true,
				minlength:2,
				remote:{  // 通过异步验证来判断用户名是否重复，返回ture或false。达到局部刷新的效果
					url:"admin/checkUsername.do",
					type:"post",
					dataType:"json",
					data:{
						username:function(){
							return $("#username").val();
						}
					}
				}
			},
			realname:{
				required:true,
				isChinese:true,
				minlength:2
			},
			password:{
				required:true,
				isMyPwd:true
			},
			passwordAgain:{
				equalTo:"#password"
			},
			roleId:{
				required:true
			}
		},
		
		//错误提示
		messages:{
			username:{
				required:"用户名不能为空",
				isEnglish:"用户名为英文",
				minlength:"用户名至少2个字符",
				remote:"用户名已经存在"
			},
			realname:{
				required:"真实姓名不能为空",
				isChinese:"真实姓名为中文",
				minlength:"真实姓名至少2个字符"
			},
			password:{
				required:"密码不能为空",
				isMyPwd:"密码长度在6-12位之间，只能包含字母、数字或下划线"
			},
			passwordAgain:{
				equalTo:"再次输入的密码不一致"
			},
			roleId:{
				required:"请选择角色"
			}
		},
		
		/* 校验成功后的处理：
		 *		1. 函数中的form就是上面表单的原始DOM对象
		 * 		2. 原生对象-->Jquery对象：$(原生DOM对象)
		 * 		3. Jquery对象-->原生对象: Jquery对象[0]
		 * 
		 */
		submitHandler:function(form){
			$(form).ajaxSubmit(function(respData){
				console.log(respData);
				// 添加完毕后的提示
				layer.msg(respData.msg,{icon:respData.code,time:1000},function(){
					// 添加成功后
					if(respData.code == 1){
						// 刷新父页面表格
						parent.refreshTable();
						// 通过父页面关闭模态窗口
						parent.layer.closeAll();
					}
				});
			});
		}
	});
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
